{extend name="public/base"/}
{block name="style"}

{/block}
{block name="body"}
	<header class="ui-header">  
	    <div class="ui-icon-left">
	        <a href="javascript:history.back(-1)" class="ui-icon icon-back"></a>
	    </div>
	    <h1 class="ui-title">
	    	<a href="/personal/bookcase/" class="ui-tit-link">我的书架</a>
	    	<a href="/personal/history/" class="ui-tit-link active">阅读历史</a>
	    </h1>
	    <div class="ui-icon-right">
	        <a href="javascript:;" class="ui-icon icon-menu"></a>
	    </div>
	     <!--导航-->
	    {block name="include"}{include file="public:dropnav" /}{/block}
	</header>
	<div class="weui-content">
		<div class="page-cells">
			<div class="weui-panel__list">
			
	            
	            
	        </div>
		</div>
	</div>
	<!--加入书架成功提示-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">成功加入书架</p>
        </div>
    </div>
{/block}
{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/novel/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/novel/js/common.js"></script>
	<script type="text/javascript" src="__PUBLIC__/static/js/jquery.cookie.js"></script>
	<script>
		var cooikes = $.cookie("history");
		var bookhistory = {$list};
		$(function () {
			if (cooikes) {
				var json = eval("(" + cooikes + ")");
				console.log(json);
				var list = "";
				$(json).each(function () {
					list += '<div class="weui-media-box weui-media-box_appmsg"><a href="' + this.url + '"  class="weui-media-box__hd"><img class="weui-media-box__thumb" src="' + this.img + '" alt=""></a>';
	                list += '<div class="weui-media-box__bd">';
	                list += '<a href="' + this.url + '" class="weui-media-inbox"><h4 class="weui-media-box__title">' + this.book + '</h4><div class="weui-media-box__his">' + this.title + '</div><div class="weui-media-box__ft"><span class="box-cate">' + this.category + ' | ' + this.fullflag+ '</span><span class="box-click">总点击：' + this.allvisit + '</span></div></a>';
	                if(canAddBookcase(this.bookid))
	                	list += '<button class="addJ-button" onclick="addBookcase(' + this.bookid + ')"><span id="bookcase_'+ this.bookid +'">加入书架</span></button>';
	                else
	               	    list += '<button class="addJ-button"><span id="bookcase_'+ this.bookid +'">已加入书架</span></button>';
	                list += '</div></div>';
				});
				$(".weui-panel__list").html(list);
			} else {
				$(".weui-panel__list").html('<div class="weui-media-box weui-media-box_appmsg"><span class="l_1" style="line-height:150px;">没有读过的书哦！</span></div>');

			}
		});
	</script>
	<script type="text/javascript">
		$('.addJ-button').click(function(){
			var status 
			if ($(this).hasClass('active')) {
				$(this).removeClass('active')
				status = 'remove'
			} else{
				$(this).addClass('active')
				status = 'add'
			}
			
			$.ajax({
                type: 'GET',
                url:'',
                dataType: 'json',
                success: function(data){
                	
                },
                error: function(xhr, type){
                    console.log(status);
                }
            });
		})

		function canAddBookcase(bookid){
			for(var i=0;i<bookhistory.length;i++){
				if(parseInt(bookhistory[i]['articleid'])==parseInt(bookid))
					return false;
			}
			return true;
		}

		function addBookcase(bookid){
			$.ajax({
				url:'/book/bookcase',
				async: false,
				dataType:'json',
				data : {'articleid':bookid},
				type:'post',
				success:function(json){
					if(json.code==1){
						$('#bookcase_'+bookid).text('已加入书架');
						message(1,'成功加入书架')
					}else{
					}
				},
				error:function(){
					
				}
			});
		}
		function message(type,msg){
			var html ='<div id="toast"><div class="weui-mask_transparent"></div><div class="weui-toast">';
			if(type==1){
				 html +='<i class="weui-icon-success-no-circle weui-icon_toast"></i>';
			}else{
				 html +='<i class="weui-icon-info-circle weui-icon_toast"></i>';
			}
			html +='<p class="weui-toast__content">'+msg+'</p></div></div>';
			$('#toast').html(html).fadeIn(100);
			setTimeout(function () {
				$('body').find('#toast').fadeOut(100);
			}, 2000);
		}
	</script>
{/block}